<template>
  <div class="comment" style="height: 100%">
    <div class="comment-header">
      <el-tooltip class="item" effect="dark" content="点我更换头像" placement="top-start">
        <div @click="handleClick">
          <input type="file" style="display: none" @change="dealWithdAvatar" ref="avatar" />
          <el-avatar
              :src="
              avatarUrl
                ? avatarUrl
                : 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png'
            "
              :size="40"
          ></el-avatar>
        </div>
      </el-tooltip>
      <el-input
          :placeholder="placeholderText"
          v-model="context"
          class="input"
          type="textarea"
          resize="none"
          size="mini"
          :maxlength="contentLength"
          @focus="isShowSecReply(undefined)"
      ></el-input>
      <el-button
          type="info"
          style="height: 40px"
          @click="addComment(articleId, undefined)"
      >{{ buttonText }}</el-button>
    </div>

    <!-- 一级评论发布时间 -->
    <div style="height: 100%" class="comment-body" v-for="(item) in comments" :key="item.id">
      <!-- 一级评论 -->
      <div class="first-comment">
        <el-avatar :size="40" :src="'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png'"></el-avatar>
        <div class="content">
          <!-- 一级评论用户昵称 -->
          <h3>{{ item.uname }}</h3>
          <!-- 一级评论发布时间 -->
          <span>{{ item.ctime }}</span>
          <!-- 一级评论评论内容 -->
          <p>{{ item.comment }}</p>
          <!-- 一级评论评论点赞 -->
          <div class="comment-right">


            <i
                class="el-icon-chat-dot-round"
                @click="isShowSecReply(item)"
            >回复</i>

          </div>
          <!-- 回复一级评论 -->
          <div class="reply-comment" v-show="isShowSec === item.id">
            <el-input
                :placeholder="placeholderText"
                class="input"
                v-model="replyContext"
                :maxlength="contentLength"
            ></el-input>
            <el-button
                type="info"
                size="mini"
                class="reply-button"
                @click="addComment(item.id, item)"
            >回复</el-button>
          </div>
          <!-- 次级评论 -->
          <div
              class="second-comment"
              v-for="(reply) in item.list"
              :key="reply.id"
          >
            <!-- 次级评论头像,该用户没有头像则显示默认头像 -->
            <el-avatar :size="40" :src="'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png'"></el-avatar>
            <div class="content">
              <!-- 次级评论用户昵称 -->
              <h3>{{ reply.uname }}</h3>
              <!-- 次级评论评论时间 -->
              <span>{{ reply.ctime }}</span>
              <span class="to_reply">{{ reply.uname }}</span>
              回复
              <span class="to_reply">{{ reply.fname }}</span>:
              <p>{{ reply.comment }}</p>
              <!-- 次级评论评论点赞 -->
              <div class="comment-right">
                <i
                    class="el-icon-chat-dot-round"
                    @click="isShowSecReply(reply)"
                >回复</i>

              </div>
              <div class="reply-comment" v-show="isShowSec === reply.id">
                <el-input
                    :placeholder="placeholderText"
                    class="input"
                    v-model.trim="replyContext"
                    :maxlength="contentLength"
                ></el-input>
                <el-button
                    type="info"
                    size="mini"
                    class="reply-button"
                    @click="addComment(item.id, reply)"
                >回复</el-button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 暂无评论的空状态 -->
    <el-empty :description="emptyText" v-show="comments.length===0"></el-empty>
    <el-divider></el-divider>
    <el-divider></el-divider>
  </div>
</template>
<script>
import {addcomment,commentlist} from "@/api";

export default {
  props: {
    articleId: {
      //评论所属文章 id
    },
    emptyText: {
      // 评论为空的时候显示的文字
      type: String,
      default: "期待你的评论！"
    },
    buttonText: {
      // 按钮文字
      type: String,
      default: "评论"
    },
    contentLength: {
      // 评论长度
      type: Number,
      default: 150
    },
    placeholderText: {
      // 默认显示文字
      type: String,
      default: "请输入最多150字的评论..."
    }
  },
  data() {
    return {
      comments: [

      ], // 获取得到的评论
      context: "", // 评论内容
      replyContext: "", //一级评论回复
      isShowSec: "", //是否显示次级回复框
      isClickId: "", //记录点击回复的评论id
      userId: 1, // 浏览器指纹
      username: "孤城浪人", //你的用户名
      firstIdx: 1,
      secIdx: 1,
      vid:'',
      avatarUrl:
          'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png'
    };
  },
mounted: function () {
  this.vid = this.articleId;
  commentlist({params:{vid:this.vid}}  ).then(res=>{
    this.comments = res.data.data

  })


},
  methods: {
    add(){
      addcomment(date).then(res=>{
        if(res.data.code === 200){
          this.$message.success("评论成功")
        }
      })
    },
    clist(){
      this.vid = this.articleId;
      commentlist({params:{vid:this.vid}}  ).then(res=>{
     this.comments = JSON.parse(JSON.stringify(res.data.data))
        console.log( this.comments,"dddddddd")
      })
    },
    // 唤起文件选择
    handleClick() {
      this.$refs.avatar.click();
    },
    dealWithdAvatar(e) {
      const maxSize = 2 * 1024 * 1024;
      const file = Array.prototype.slice.call(e.target.files)[0];
      console.log(file);
    },


    isShowSecReply(id) {
      if (id.id) {
        this.isShowSec = id.id;
        if (this.isClickId === this.isShowSec) {
          this.isShowSec = "";
        } else {
          this.isShowSec = id.id;
        }
        this.isClickId = this.isShowSec;
      } else {
        this.isShowSec = this.isClickId = "";
      }
    },

    async addComment(id, replyName) {

      let res = {};
      // 评论添加成功，返回的数据
      //本地更新评论列表
      if (replyName) {
        // 添加二级评论
        if (!this.replyContext) {
          this.$message.warning("评论或留言不能为空哦！");
          return;
        }

        res.data = {
          uid: this.$cookies.get("user").id,
          vid: this.articleId,
          comment: this.replyContext,
          facid:id,
          fauid:replyName.uid,
          type:2
        };
        console.log(res.data.fuid,"rrrrrr")
        // const comment = this.comments.find(item => item.id == id);
        // if (!comment.list) {
        //   comment.list = [];
        // }
        // comment.list.push(res.data);
        addcomment(res.data).then(res=>{
          this.clist()
          this.replyContext = "";
        })

      } else {
        // 添加一级评论，提交数据到后端
        if (!this.context) {
          this.$message.warning("评论或留言不能为空哦！");
          return;
        }

        // 模拟数据提交成功后返回数据
        res.data = {
          uid: this.$cookies.get("user").id,
          vid: this.articleId, // 评论的文章id
          comment: this.context, //评论内容
          type:1
        };

        addcomment(res.data).then(res=>{
         this.clist()
          this.context = "";
        })



      }
      this.isShowSec = this.isClickId = "";
    }
  }
};
</script>

<style lang="less" scoped>
.comment {
  min-height: 26vh;
  border-radius: 5px;
  margin-top: 2px;
  overflow: hidden;
  .active {
    color: rgb(202, 4, 4);
  }
  .comment-header {
    position: relative;
    height: 50px;
    padding: 10px 5px;
    display: flex;
    align-items: center;

    .input {
      margin-left: 10px;
      margin-right: 20px;
      flex: 1;
      /deep/.el-input__inner:focus {
        border-color: #dcdfe6;
      }
    }
  }

  .comment-body {
    min-height: 70px;
    padding: 10px 20px;
    font-size: 14px;
    .first-comment {
      display: flex;
      .input {
        /deep/.el-input__inner:focus {
          border-color: #dcdfe6;
        }
      }
      i {
        margin-right: 5px;
        margin-left: 1vw;
        cursor: pointer;

        &:nth-child(3) {
          color: rgb(202, 4, 4);
        }
      }

      .content {
        margin-left: 10px;
        position: relative;
        flex: 1;

        & > span {
          font-size: 12px;
          color: rgb(130, 129, 129);
        }

        .comment-right {
          position: absolute;
          right: 0;
          top: 0;
        }

        .reply-comment {
          height: 60px;
          display: flex;
          align-items: center;

          .reply-button {
            margin-left: 20px;
            height: 35px;
          }
        }

        .second-comment {
          display: flex;
          padding: 10px 0 10px 5px;
          border-radius: 20px;
          background: #ffffff;
          .to_reply {
            color: rgb(126, 127, 128);
          }
        }
      }
    }
  }
}
</style>
